<template>
    <div class="hall">
    <div class="bg"></div>
    <!-- <img src="../../../public/img/hall/black.png"> -->
    <div class="centered"><img src="../../../public/img/hall/border.png" class="centered">
        <div class="title-window">
          <div class="logout" @click="logout()">退出</div>
          <div class="create" @click="create()">创建房间</div>
          <div class="flushed" @click="flushed()">刷新</div></div>
        <div class="content-window">
        <house v-for="house in $store.state.house" :house="house" :key="house.number"></house>
    </div>
      </div>
  </div>
</template>

<script lang="ts">
import house from "@/views/hall/components/house.vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "hall",
  components:{
    house
  },
  methods:{
    flushed(){
      this.$http.get('http://10.1.2.122:8088/api/room/list', {
        user_id: window.localStorage.getItem("userId"),
        token:window.localStorage.getItem("token")
      }
      ).then((response)=> {
        console.log("store: ",response.data.data)
        this.$store.state.house=response.data.data;
        console.log(this.$store.state.house)
      }).catch(
          function (error) {
            alert(error);
          })
    },
    create(){
      const userId = Number(window.localStorage.getItem("userId"));
      this.$http.post(`http://10.1.2.122:8088/api/room/create/${userId}`, {
            totalRounds: 8
          }
      ).then((response)=> {
        console.log(response.data.data.id);
        this.$store.state.home.id=response.data.data.id;
        // this.$router.push("/game");
      }).catch(
          function (error) {
            alert(error);
          });
    },
    logout(){
      const user_id = window.localStorage.getItem("userId")
      this.$http.post(`http://10.1.2.122:8088/api/user/logout/${user_id}`,
      ).then((response)=> {
        console.log(response)
        localStorage.clear();
        this.$router.push("/login");
      }).catch(
          function (error) {
            alert(error);
          });
    }
  },
  mounted() {
    this.$store.dispatch("clear_game");
    this.$http.get('http://10.1.2.122:8088/api/room/list',
    ).then((response)=> {
      this.$store.state.house=response.data.data;
    }).catch(
        function (error) {
          alert(error);
        })
  }
}
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
div.bg {
  background-image:url("../../../public/img/hall/indoor.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.centered {
  position: absolute;
  /* float: auto; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: 4*height; */
  width:912px;
  /* max-width: 912px; */
  /* height: expression_r(this.width >542 ? (542*(this.height/this.width)): true); */
  height: 500px;
  /* height:500px; */
  image-rendering: pixelated;
}
.title-window {
  position: absolute;
  top: 7%;
  left: 50%;
  /* top:0;
  left:0; */
  bottom: -100px;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 7%;
  z-index: 0;
  background-image: url("../../../public/img/hall/title.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* background-color:; */
}

  .title-window .logout {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    background-image: url("../../../public/img/hall/logout.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    top: 10%;
    left: 85%;
    width: 10%;
    height: 80%;
  }
  .title-window .create {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    background-image: url("../../../public/img/hall/create.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    top: 10%;
    left: 7%;
    width: 10%;
    height: 80%;
  }
  .title-window .flushed {
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    background-image: url("../../../public/img/hall/refresh.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    top: 10%;
    left: -15%;
    width: 10%;
    height: 80%;
  }
  .title-window .create:hover {
    cursor: pointer;
    transform: scale(1.1);
  }
  .title-window .logout:hover {
    cursor: pointer;
    transform: scale(1.1);
  }
.title-window .flushed:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.content-window {
  position: absolute;
  top: 53%;
  left: 50%;
  bottom: -100px;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 80%;
  overflow: auto;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  /* padding-right: 5px; */
  /* background-color: aqua; */
}
.content-window::-webkit-scrollbar {
  width: 8px;
  position: right;
}
.content-window::-webkit-scrollbar-track {
  background: #666;
}
.content-window::-webkit-scrollbar-thumb {
  background-color: rgb(216, 203, 179);
}
.content-window {
  scrollbar-width: thin;
  scrollbar-color: rgb(112, 89, 45) #666;
}



</style>